<template>
<div>
  <div>
    <el-row :gutter="20">
      <el-col  :span="24">
        <el-card shadow="hover" class="card left">
          <div>

          </div>
<!--          <div class="_left">-->
<!--            <div style="font-size: 40px;font-weight: bolder">Welcome!</div>-->
<!--            <div class="title">您好！<span style="color: #286DDD;"><u>{{info}}</u></span></div>-->
<!--            <div class="title">欢迎使用医护人事档案管理系统！</div>-->
<!--          </div>-->
<!--          <img src="../assets/tx.png" style="width: 100px;position: relative;z-index: 2">-->
<!--          &lt;!&ndash;          <img class="bg" src="../assets/bg.png" >&ndash;&gt;-->
<!--          <div class="right">-->
<!--            <div class="btn">-->
<!--              <img style="width: 40px;margin-bottom: 10px" src="../assets/锁.png">-->
<!--              <div class="title">更改密码</div>-->
<!--            </div>-->
<!--            <div class="btn" style="margin-left: 80px">-->
<!--              <img style="width: 30px;margin-bottom: 10px" src="../assets/退出.png">-->
<!--              <div class="title">退出登录</div>-->
<!--            </div>-->
<!--          </div>-->
        </el-card>
      </el-col>
<!--      <el-col  :span="16">-->
<!--        <div class="card">-->
<!--          <el-row :gutter="10" style="margin-bottom: 10px">-->
<!--            <el-col :span="12" style="width:50%;height: 245px">-->
<!--              <el-card @click.native.native="enter(1)" shadow="hover" style="cursor: pointer ;background-color: rgb(225,243,255);width: 100%;height: 100%;border-radius: 8px 0 0 0;overflow: hidden">-->
<!--                <img  class="imgBtn"  src="../assets/档案.png">-->
<!--                <div class="title blue">人事档案</div>-->
<!--                &lt;!&ndash;                <img  class="imgBtn imgBg"  src="../assets/档案.png">&ndash;&gt;-->
<!--              </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="12" style="width:50%;height: 245px">-->
<!--              <el-card @click.native="enter(2)" shadow="hover" style="cursor: pointer ;background-color: rgb(225,247,251);width: 100%;height: 100%;border-radius: 0 8px 0 0;overflow: hidden">-->
<!--                <img  class="imgBtn" src="../assets/人事调动2.png">-->
<!--                <div class="title green">人事调动</div>-->
<!--              </el-card>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row :gutter="10">-->
<!--            <el-col :span="12" style="width:50%;height: 245px">-->
<!--              <el-card @click.native="enter(3)" shadow="hover" style="cursor: pointer ;background-color: rgb(253,237,223);width: 100%;height: 100%;border-radius: 0 0 0 8px;overflow: hidden">-->
<!--                <img class="imgBtn"  src="../assets/晋升.png">-->
<!--                <div class="title yellow">晋升管理</div>-->
<!--              </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="12" style="width:50%;height: 245px">-->
<!--              <el-card @click.native="enter(4)" shadow="hover" style="cursor: pointer ;background-color: rgb(249,224,221);width: 100%;height: 100%;border-radius: 0 0 8px 0;overflow: hidden">-->
<!--                <img  class="imgBtn" src="../assets/系统设置.png">-->
<!--                <div class="title red">系统设置</div>-->
<!--              </el-card>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </div>-->
<!--      </el-col>-->
    </el-row>
    <div style="margin-top: 20px" class="bottom flex-row">
      <el-card shadow="hover"  class="smallCard">
        <div class="title">档案状态</div>
        <div class="title deep">待审核</div>
      </el-card>
      <el-card shadow="hover"  class="smallCard">
        <div class="title">我的调动</div>
        <div class="title deep">2</div>
      </el-card>
      <el-card shadow="hover"  class="smallCard">
        <div class="title">数据看板</div>
        <div class="title deep">...</div>
      </el-card>
      <el-card shadow="hover"  class="smallCard">
        <div class="title">未读消息</div>
        <div class="title deep">2</div>
      </el-card>
      <div v-for="item in cardList" :style="item.color" class="head-card">
        <div class="card-block flex-column">
          <div style="font-size: 16px;">
            {{ item.name }}
          </div>
          <div style="height: 42px" />
          <div>
            <span style="font-size: 28px;font-weight: bold;margin-top: 20px">
              {{ item.medical+item.machine+item.Cosmetics }}
            </span>
            件</div>
        </div>
        <div class="card-block flex-column info">
          <div class="info-text">
            药品类：{{ item.medical }}
          </div>
          <div class="info-text">
            医疗器械类：{{ item.machine }}
          </div>
          <div class="info-text">
            化妆品类：{{ item.Cosmetics }}
          </div>
        </div>
      </div>
    </div>
  </div>
<!--  <div>-->
<!--    <div>-->
<!--      <el-card class="dataView">-->
<!--        <div>数据看板</div>-->
<!--      </el-card>-->
<!--    </div>-->
<!--  </div>-->
</div>
</template>

<script>
export default {
  name: "newFile",
  data(){
    return{
      info:"",
      cardList: [
        {
          name: '行政许可',
          color: {
            background: ' linear-gradient(to right, rgba(54, 139, 238, 1), rgba(55, 156, 242, 1))',
            width: '22%',
            height: '200px',
            color: 'white',
            'box-shadow': '5px 0px 20px 0px rgba(55, 156, 242,0.5)',
          },
          medical: 23,
          machine: 34,
          Cosmetics: 16,
        },
        {
          name: '监督检查',
          color: {
            background: ' linear-gradient(to right,  rgba(250, 131, 112, 1), rgba(247, 96, 159, 1))',
            width: '22%',
            height: '200px',
            color: 'white',
            'box-shadow': '5px 0px 20px 0px rgba(247, 96, 159,0.5)',
          },
          medical: 33,
          machine: 56,
          Cosmetics: 10,
        },
        {
          name: '稽查执法',
          color: {
            background: ' linear-gradient(to right, rgba(107, 93, 221, 1), rgba(135, 91, 252, 1))',
            width: '22%',
            height: '200px',
            color: 'white',
            'box-shadow': '5px 0px 20px 0px rgba(135, 91, 252,0.5)',
          },
          medical: 61,
          machine: 18,
          Cosmetics: 17,
        },
        {
          name: '其它',
          color: {
            background: ' linear-gradient(to right,  rgba(248, 112, 62, 1), rgba(242, 153, 63, 1))',
            width: '22%',
            height: '200px',
            color: 'white',
            'box-shadow': '5px 0px 20px 0px rgba(242, 153, 63,0.5)',
          },
          medical: 20,
          machine: 46,
          Cosmetics: 31,
        }
      ],
    }
  },
  methods:{
    enter(num){
      if(num==1){
        this.$router.push('/index')
      }else if(num==2){

      }else if(num==3){

      }else{
        this.$router.push('/form')
      }
    }
  },
  mounted() {
    this.info=`${window.localStorage.dept}-${window.localStorage.name}`
  }
}
</script>

<style scoped>
  .card{
    height: 500px;
    background-color: white;
    /*box-shadow: rgba(0.1,0.1,0.1,0.06) 0px 2px 6px;*/
    border-radius: 4px;
  }
  .left{
    /*border-top: #3a8ee6 6px solid;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  ._left{
    height: 140px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    margin-bottom: 60px;
  }
  .right{
    /*position: relative;*/
    /*z-index: 2;*/
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-top: 20px;
  }
  .title{
    font-size: 16px;
    font-weight: normal;
  }
  .btn{
    position: relative;
    z-index: 10;
    cursor: pointer;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*box-shadow: rgba(0.1,0.1,0.1,0.06) 0px 2px 6px;*/
  }
  .imgBtn{
    width: 80px;
    margin-top: 50px;
  }
  .imgBg{
    width:300px;
    position: absolute;
    opacity: 0.2;
    top: 10px;
    left:360px;
  }
  .blue{
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    color: rgb(57,110,224);
  }
  .green{
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    color: rgb(101,196,0);
  }
  .yellow{
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    color: rgb(224,161,47);
  }
  .red{
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    color: rgb(232,76,74);
  }
  .bg{
    width: 400px;
    /*height: 200px;*/
    opacity: 0;
    position: absolute;
    z-index: 1;
    bottom:10px;
  }
  .bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .deep{
    margin-top: 30px;
    font-size: 30px;
    font-weight: bold;
  }
  .smallCard{
    width: 24%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
  }
  .flex-row{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
  }
  .flex-column{
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .card-block{
    width: 48%;
    text-align: center;
    justify-content: center;
    /*margin: 20px 0;*/
  }
  .info{
    font-size: 14px;
  }
  .dataView{
    width: 30%;
  }
</style>
